<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
        <style type="text/css">

div.avatar
{
        position : absolute;
        background-image:url('image/face_avatars_full.png');
	background-position:0px 0px;
	background-repeat:no-repeat;
	width : 74px;
	height : 74px;
	display: block;
	padding: 3px;
        border: 1px;
        border-style:solid;
        border-color:#aaaaaa;
}
div.avatarroll
{
        position : absolute;
        background-image:url('image/face_avatars_full.png');
	background-position:0px 0px;
	background-repeat:no-repeat;
	width : 74px;
	height : 74px;
	display: block;
	padding: 3px;
        border: 0px;
        opacity: 0.4;
        filter:alpha(opacity=40); /* For IE8 and earlier */
}
div.avatarroll:hover
{
        opacity: 1.0;
        filter:alpha(opacity=100); /* For IE8 and earlier */
}  
  </style>
    </head>
    <body>
       <script type='text/javascript'>
          var offset = 0
          var selector = 0

          var scroller = function(k) {
              setTimeout(setavatars(k), 500)
           }

          var generate_avatarview = function() {
              var avview = document.getElementById("avatarviewer");
              var iHTML = '';
              var x;
              var y;
              for (i=-3;i<=3;i++) {
                  if (i==0) {
                      x = (selector % 8)*74+16;
                      y = (Math.round(selector / 8))*74;
                      iHTML += '<div class="avatar" id="av0" style="opacity: 1.0; left : 342Px; width:74px; height:74px; background-position: -'+x+'px -'+y+'px"></div>';
                  } else {
                      opacity = 0.5-Math.abs(i)/5;
                      x = ((selector+i) % 8)*74+16;
                      y = (Math.round(((selector+i)%88) / 8))*74;
                      r = 342+(74-Math.abs(i)*10)*i
                      iHTML += '<div class="avatarroll" id="av'+i+'" style="z-index : '+ (5-Math.abs(i))+ '; left :' + r + '"px; width:74px; height:74px; opacity: '+opacity+'; background-position: -'+x+'px -'+y+'px"></div>';
                  }
              }
              avview.innerHTML = iHTML;
              for (i = -3; i <= 3; i++) {
                  if (i != 0) {
                     var scrollavatars = document.getElementById("av"+i);
                     s = 'scroller('+i+')';
                     scrollavatars.onmouseover = new Function(s);
                  }
              }
          }

          var setavatars = function(k) {
              selector = (88+(selector + k)) % 88
              for (i=-3;i<=3;i++) {
                  av = document.getElementById("av"+i);
                  x = ((selector+i) % 8)*74+16;
                  y = (Math.round(((selector+i)%88) / 8))*74;
                  av.style.backgroundPositionX = -x+"px";
                  av.style.backgroundPositionY = -y+"px";
                  oForm = document.forms["profile"];
                  oForm.elements["avatar"].value = selector;
              }
          }

          setTimeout(generate_avatarview,1000);
      </script>

      <div width="100%" height="80px"><center><font size="24px">PyTrek</font></center></div>
         <div<div id="instructions" style="width:" ><b>CREATE PROFILE</b><br>
         <form name="profile" action="/storeprofile" method="post">
              <div><input type="text" name="commander" value="{{commander}}"></div>
              <div>Select avatar:</div><div id="avatarviewer" style="height : 74px; width = 500px border:1px; border-style:solid; border-color : #aaaaaa"></div>
              <div><input type="submit" value="Save Profile"><div><input type="text" name="avatar"></div>

        </form>
  </body>
</html>